//out: ../css/
@import './base.less';
body {
    background-color: #f9fafb;
  }
  
  @vw:3.75vw;
  
  // 头部
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 (15 / @vw);
    height: (50 / @vw);
    background-color: #fff;
  }
  header {
    // 左边
    .left {
      width: (235 / @vw);
      height: (50 / @vw);
      background-image: url(../assets/head.png);
      background-size: contain;
      background-repeat: no-repeat;
    }
    a {
      width: (80 / @vw);
      height: (30 / @vw);
      background-color: #ffe31b;
      border-radius: (15 / @vw);
      text-align: center;
      line-height: (30 / @vw);
      font-size: (14 / @vw);
    }
  }

  .search{
    display: flex;
    height: (52/@vw);
    padding: (10/@vw) (15/@vw);
    // align-items: center;
    .txt{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: (16/@vw);
      background-color: rgba(0, 0,0, 0.1);
      span{
        font-size: (16/@vw);
        margin: (2/@vw);
      }
    }
  }
  .banner{
    height: (120/@vw);
    padding: 0 (15/@vw);
    img{
      height: (120/@vw);
      width: 100%;
      border-radius: (5/@vw);
    }
  }
  .list{
    padding: 0 (15/@vw);
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: (20/@vw);
      margin-bottom: (10/@vw);
      margin-top: (10/@vw);
      a{
        font-size: (12/@vw);
        color: rgba(0, 0,0, 0.4);
        
      }
    }
    .content{
      ul{
        li{
          display: flex;
          margin-top: (10/@vw);
          .pic{
            img{
              width: (105/@vw);
              height: (105/@vw);
              border-radius: (10/@vw);
              margin-right: (15/@vw);
            }
          }
          .txt{
            display: flex;
            flex-direction: column;
            a{
              font-size: (12/@vw);
              margin-bottom: (7/@vw);
              color:rgba(0, 0,0, 0.4) ;
            }
            .more{
              color:rgba(0, 0,0, 1) ;
              font-size: (14/@vw);
            }
          }
        }
      }
    }
  }
  .recommend{
    padding: 0 (15/@vw);
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: (20/@vw);
      margin-bottom: (10/@vw);
      margin-top: (10/@vw);
      a{
        font-size: (12/@vw);
        color: rgba(0, 0,0, 0.4);
      } 
    }
    .content{
      ul{
        display: flex;
        flex-wrap: wrap;
        li{
          display: flex;
          flex-direction: column;
          margin-top: (10/@vw);
          margin-right: (10/@vw);
          .pic{
            position: relative;
            width: (105/@vw);
            height: (105/@vw);
            img{
              width: (105/@vw);
              height: (105/@vw);
              border-radius: (10/@vw);
              margin-right: (15/@vw);
              
            }
            .cover{
              position: absolute;
              
              width: (70/@vw);
              height: (30/@vw);
              bottom: 0;
              left: 0;
              background-color: rgba(0, 0,0, 0.4);
              text-align: center;
              line-height: (30/@vw);
              border-radius: (10/@vw);
              color: rgba(255, 255,255, 1);
            }
          }
          .txt{
            width: (105/@vw);
            display: flex;
            flex-wrap: wrap;
          }
        }
      }
    }
  }
  .download{
    position: fixed;
    bottom: (20/@vw);
    display: flex;
    margin-left: (15/@vw);
    width: (345/@vw);
    height: (45/@vw);
    border-radius: (23/@vw);
    background-color: rgba(255, 255,255, 1);
    padding: 0 (15/@vw);
    align-items: center;
    justify-content: space-between;
    img{
      width: (36/@vw);
      height: (36/@vw);
    }
    span{
      padding: (8/@vw);
      background-color: rgba(0, 0,0, 0.1);
      border-radius: (20/@vw);
    }
  }